<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<div id="app">
    <label for="firstName">firstName：</label>
    <input type="text" v-model.lazy="player.firstName" id="firstName">
    <label for="lastName">lastName：</label>
    <input type="text" v-model="player.lastName" id="lastName">

    <br>

    <h2>全名是：{{player.fullName}}</h2>
</div>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: {
            // 定义数据
            player:{
                firstName:'',
                lastName: '',
                fullName: ''
            }
        },
        watch: {
            player: {
                handler(newVal,oldVal){
                    console.log("player-handler函数被调用")
                    this.player.fullName = newVal.firstName + " " + newVal.lastName
                },
                immediate: true,//刷新加载，立马触发一次handler方法
                deep: true //可以深度检测到 player 对象到属性值的变化
            }
        }
    });


</script>

</body>
</html>